$euiBreakpoints: (
  "xs": 0,
  "s": 575px,
  "m": 768px,
  "l": 992px,
  "xl": 1200px
) !default;

$euiBreakpointKeys: map-keys($euiBreakpoints);
// Set scroll bar appearance on Chrome (and firefox).
@mixin scrollBar() {
  // Firefox's scrollbar coloring cascades, but the sizing does not,
  // so it's being added to this mixin for allowing support wherever custom scrollbars are
  // sass-lint:disable-block no-misspelled-properties
  scrollbar-width: thin;

  // sass-lint:disable-block no-vendor-prefixes
  &::-webkit-scrollbar {
    width: 16px;
    height: 16px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--scrollBackgroundColor);
    border: 6px solid transparent;
    background-clip: content-box;
  }

  &::-webkit-scrollbar-corner,
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  @content;
}

// This file makes use of double quotes to format errors with nested single quotes
// The indentation linting freaks out on comments above else statements and is disabled.

// sass-lint:disable quotes, no-warn, indentation

// A sem-complicated mixin for breakpoints, that takes any number of
// named breakpoints that exists in $euiBreakpoints.

@mixin euiBreakpoint($sizes...) {
  // Loop through each size parameter
  @each $size in $sizes {
    // Store the location of the size in the list to check against
    $index: index($euiBreakpointKeys, $size);

    // Check to make sure it exists in the allowed breakpoint names
    @if ($index) {
      // Set the min size to the value of the size
      $minSize: map-get($euiBreakpoints, $size);

      // If it is the last item, don't give it a max-width
      @if ($index == length($euiBreakpointKeys)) {
        @media only screen and (min-width: $minSize) {
          @content;
        }
        // If it's not the last item, add a max-width
      } @else {
        // Set the max size to the value of the next size (-1px as to not overlap)
        $maxSize: map-get($euiBreakpoints, nth($euiBreakpointKeys, $index + 1)) - 1px;

        // If it's the the first item, don't set a min-width
        @if ($index == 1) {
          @media only screen and (max-width: $maxSize) {
            @content;
          }
          // Otherwise it should have a min and max width
        } @else {
          @media only screen and (min-width: $minSize) and (max-width: $maxSize) {
            @content;
          }
        }
      }
      // If it's not a known breakpoint, throw a warning
    } @else {
      @warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints. Accepted values are '#{$euiBreakpointKeys}'";
    }
  }
}

@mixin transparent($color, $factor) {
  $alpha: 1 - $factor;
  color: rgba($color, $alpha);
}
